<template>
	<!--总容器-->
	<div class="wrapper">
		<div class="back-icon" @click="goBack()">
			<i class="fa fa-arrow-left"></i>
		</div>
		<!--header部分-->
		<header>
			搜索商家
		</header>
		
		<!--search部分-->
		<div class="search">
			<div class="search-fixed-top" ref="fixedBox">
				<div class="search-box">
					<i class="fa fa-search"></i>
					<input type="text" v-model="str" placeholder="搜索饿了么商家名称、商家地址">
					<button @click="doSearch()">搜索</button>
				</div>
			</div>
		</div>
		
		<ul class="business">
			<li v-for="item in businessArr" @click="toBusinessInfo(item.businessId)">
				<div class="business-img">
					<img :src="item.businessImg">
					<div class="business-img-quantity" v-show="item.quantity>0">{{item.quantity}}</div>
				</div>
				<div class="business-info">
					<h3>{{item.businessName}}</h3>
					<p>&#165;{{item.starPrice}}起送 | &#165;{{item.deliveryPrice}}配送</p>
					<p>{{item.businessExplain}}</p>
				</div>
			</li>
			
		</ul>
		
		<!--底部菜单部分-->
		<Footer></Footer>
	</div>
</template>

<script>
	import { ref, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue';
	import Footer from '../components/Footer.vue';
	import { useRouter } from 'vue-router'
	import {useRoute} from 'vue-router'
	export default {
	  name: 'Index',
	  components: {
	    Footer,
	  },
	  setup(){
		const currentInstance = getCurrentInstance();
		const router = useRouter();
		const route = useRoute();
		const str = ref('');
		const businessArr = ref([]);
		const user = ref({});
		const goBack = () => {
			router.go(-1);
		};
		const doSearch = () => {
			currentInstance.appContext.config.globalProperties.$axios.post(
					'BusinessController/listBusinessByname', currentInstance.appContext.config
					.globalProperties.$qs.stringify({
						bname: str.value
					}))
				.then(response => {
					businessArr.value = response.data;
					// console.log(businessArr);
					// 判断是否登录
					if (user.value != null) {
						listCart();
					}
				})
				.catch(error => {
					console.error(error);
				});
		}
		const toBusinessInfo = (businessId) => {
			// 使用新的路由导航方法
			// 注意：在当前组件中，需要引入 `router` 对象
			router.push({
				name: 'BusinessInfo',
				params: {
					businessId: businessId
				}
			});
		};
		const listCart = () => {
			currentInstance.appContext.config.globalProperties.$axios.post('CartController/listCart',
				currentInstance.appContext.config.globalProperties.$qs.stringify({
					userId: user.value.userId
				})).then(response => {
				let cartArr = response.data;
				// console.log(cartArr);
				//遍历所有食品列表
				for (let businessItem of businessArr.value) {
					businessItem.quantity = 0;
					for (let cartItem of cartArr) {
						if (cartItem.businessId == businessItem.businessId) {
							businessItem.quantity += cartItem.quantity;
						}
					}
				}
				businessArr.value.sort();
			}).catch(error => {
				console.error(error);
			});
		};
		onMounted(() => {
			user.value = currentInstance.appContext.config.globalProperties.$getSessionStorage('user');
		});
		return{
			businessArr,str,goBack,doSearch,user,listCart,toBusinessInfo
		}
	  }
	}
</script>

<style scoped>
	/*********************总容器******************/
	.wrapper
	{
		width: 100%;
		height: 100%;
	}
	/*********** 回退按钮 ***********/
	.wrapper .back-icon{
		width: 12vw;
		height: 12vw;
		background-color: #0097FF;
		color: #FFFFFF;
		font-size: 4.8vw;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1001;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	/**********************header*******************/
	.wrapper header
	{
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #FFFFFF;
		font-size: 4.8vw;
		
		display: flex;
		justify-content: center;
		align-items: center;
		
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;
	}
	/*********************search*******************/
	.wrapper .search
	{
		width: 100%;
		height: 13vw;
		position: fixed;
		left: 0;
		top: 12vw;
		z-index: 1000;
	}
	.wrapper .search .search-fixed-top
	{
		width: 100%;
		height: 13vw;
		background-color: #0097FF;
		display: flex;
		justify-content: center;
		align-items: center;
	
	}
	.wrapper .search .search-fixed-top .search-box
	{
		width: 90%;
		height: 9vw;
		background-color: #fff;
		border-radius: 2px;
		
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		font-size: 3.5vw;
		color: #AEAEAE;
		font-family: "宋体";
		
		/*****保证文字无法选中*****/
		user-select: none;
	}
	.wrapper .search .search-fixed-top .search-box i{
		box-sizing: border-box;
		padding: 2vw;
	}
	.wrapper .search .search-fixed-top .search-box .fa-search
	{
		margin-right: 1vw;
	}
	.wrapper .search .search-fixed-top .search-box input{
		width: 80%;
		height: 88%;
	}
	.wrapper .search .search-fixed-top .search-box button{
		height: 100%;
		display: flex;
		align-items: center;
	}
	
	/*********** 商家列表部分 ***********/
	.wrapper .business {
		width: 100%;
		margin-top: 25vw;
		box-sizing: border-box;
		padding-bottom: 14vw;
	}
	
	.wrapper .business li {
		width: 100%;
		box-sizing: border-box;
		padding: 2.5vw;
		border-bottom: solid 1px #DDD;
		user-select: none;
		cursor: pointer;
	
		display: flex;
		align-items: center;
	}
	
	.wrapper .business li .business-img {
		position: relative;
	}
	
	.wrapper .business li .business-img img {
		width: 20vw;
		height: 20vw;
	}
	
	.wrapper .business li .business-img .business-img-quantity {
		width: 5vw;
		height: 5vw;
		background-color: red;
		color: #FFFFFF;
		font-size: 3.6vw;
		border-radius: 2.5vw;
	
		display: flex;
		justify-content: center;
		align-items: center;
	
		position: absolute;
		right: -1.5vw;
		top: -1.5vw;
	}
	
	.wrapper .business li .business-info {
		margin-left: 3vw;
	}
	
	.wrapper .business li .business-info h3 {
		font-size: 3.8vw;
		color: #555;
	}
	
	.wrapper .business li .business-info p {
		font-size: 3vw;
		color: #888;
		margin-top: 2vw;
	}
</style>